<template>
  <app-header></app-header>


  <div class="login-content">
    <div class="login-flex">
      <div class="login-left"></div>
      <!---->
      <div class="login-box">
        <h3 class="login-title">实名认证</h3>
        <form action="" id="renZ_Submit">
          <div class="alert-input">
            <input type="text" class="form-border user-name" name="username" v-model="name" @blur="checkName"
                   placeholder="请输入您的真实姓名">
            <div class="input-err">{{ nameErr }}</div>
            <p class="prompt_name"></p>
            <input type="text" class="form-border user-sfz" v-model="idCard" @blur="checkIdCard" name="sfz"
                   placeholder="请输入18位身份证号">
            <div class="input-err">{{ idCardErr }}</div>
            <p class="prompt_sfz"></p>
            <input type="text" class="form-border user-num" name="mobile" v-model="phone" readonly
                   placeholder="请输入11位手机号">

          </div>
          <br/>
          <div class="alert-input-agree">
            <input type="checkbox" v-model="agree">我已阅读并同意<a href="javascript:;" target="_blank">《动力金融网注册服务协议》</a>
          </div>
          <div class="alert-input-btn">
            <input type="button" @click="dorealName" class="login-submit" value="认证">
          </div>
        </form>
        <div class="login-skip">
          暂不认证？ <a href="javascript:;">跳过</a>
        </div>
      </div>

    </div>
  </div>


  <app-footer></app-footer>
</template>

<script>
import AppHeader from "@/components/AppHeader";
import AppFooter from "@/components/AppFooter";
import {doPost} from "@/utils/request";

export default {
  name: "RealNameView",
  components: {AppFooter, AppHeader},
  data() {
    return {
      phone: '',
      name: '',
      nameErr: '',
      idCard: '110123200009099999',
      idCardErr: '',
      agree: false,


    }
  },
  mounted() {
    //从盈利宝的key中获取登录的手机号
    let ylbToken = window.sessionStorage.getItem("ylb");
    if (ylbToken) {
      this.phone = JSON.parse(ylbToken).phone;
    }

  },
  methods: {

    checkName() {
      if (!this.name) {
        this.nameErr = '请输入姓名';
      } else if (this.name.length < 2) {
        this.nameErr = '姓名至少两个字节';
      } else {
        this.nameErr = '';
      }
    },
    checkIdCard() {
      if (!this.idCard) {
        this.idCardErr = '请输入身份证号';
      } else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCard)) {
        this.idCardErr = '格式错误.';
      } else {
        this.idCardErr = '';
      }
    },

    dorealName() {

      if (!this.agree) {
        alert("请先阅读服务协议");
        return;
      }

      this.checkIdCard();
      this.checkName();
      if (this.nameErr === '' && this.idCardErr === '') {
        doPost("/user/realname", {name: this.name, idCard: this.idCard}).then(resp => {
          if (resp.code === 999) {
            //更新sesionstorage的name 为姓名
            let ylbToken = window.sessionStorage.getItem("ylb");
            if (ylbToken) {
              let ylbObject = JSON.parse(ylbToken);
              ylbObject.name = resp.result;
              window.sessionStorage.setItem("ylb", JSON.stringify(ylbObject));
            }
            //跳转用户中心
            this.$router.push({path: "/user/center"});
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>